<template>
	<div class="layout-padding">
		<el-card class="footer-btn">
			<div class="button">
				<el-button @click="onBack">返 回</el-button>
				<el-button type="primary" @click="onSubmit">保 存</el-button>
			</div>
		</el-card>
		<div class="layout-padding-auto layout-padding-view" v-loading="loading">
			<div class="page-design">
				<el-card>
					<div class="page-left">
						<el-collapse v-model="activeNames">
							<el-collapse-item title="基础组件" name="1">
								<div class="canUse-list">
									<div v-for="(item, index) in canUseComponents.base" class="item"
										@click="addComponent(item)">
										<div>
											<img :src="item.icon" class="icon" />
										</div>
										{{ item.name }}
									</div>
								</div>
							</el-collapse-item>
							<!-- <el-collapse-item title="营销组件（待开发）" name="2">
								<div class="canUse-list">
									<div v-for="(item, index) in canUseComponents.marketing" class="item">
										<div>
											<img :src="item.icon" class="icon" />
										</div>
										{{ item.name }}
									</div>
								</div>
							</el-collapse-item> -->
						</el-collapse>
					</div>
				</el-card>
				<div class="preview-wrap">
					<div class="preview">
						<img :src="iphone14Svg" class="iphone" />
						<div class="preview-title">
							<div class="title-bor">
								<div class="title-text">{{ form.pageName }}</div>
							</div>
						</div>
						<div class="content">
							<draggable v-model="list.componentsList" v-bind="dragOptions" @start="startComponent"
								animation="700" item-key="id">
								<template #item="{ element, index }">
									<div @click="onComponent(element, index)" class="com-item"
										:class="index == selectedIndex ? 'active' : ''">
										<component :is="element.name" :showData="element.data" />
										<div v-if="showPreviewBtn && index == selectedIndex" class="preview-btn">
											<!-- <div class="item">
												<el-icon :size="20"> <ele-ArrowUp /> </el-icon>
											</div>
											<div class="item">
												<el-icon :size="20"> <ele-ArrowDown /> </el-icon>
											</div>
											<div class="item">
												<el-icon :size="20"> <ele-Download /> </el-icon>
											</div> -->
											<div class="item">
												<el-icon :size="20" @click="delComponent">
													<ele-Delete />
												</el-icon>
											</div>
										</div>
									</div>
								</template>
								<template #footer>
									<div class="footer">环兴商城 版权所有 (1.0.0)</div>
								</template>
							</draggable>
						</div>
					</div>
				</div>
				<el-card class="page-right">
					<component v-if="showSetting" :is="settingName" :formData="settingData" />
				</el-card>
			</div>
		</div>
	</div>
</template>
<script lang="ts">
import draggable from 'vuedraggable';
import { ref, defineComponent, defineAsyncComponent, computed, nextTick, reactive } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { storeToRefs } from 'pinia';
import { diypage } from '/@/stores/diyPage';
import iphone14Svg from '/@/assets/iphone13.svg';
import noticeSvg from '/@/assets/notice.svg';
import titleSvg from '/@/assets/title.svg';
import goodsSvg from '/@/assets/goods.svg';
import menuSvg from '/@/assets/menu.svg';
import imageSvg from '/@/assets/image.svg';
import tabNavSvg from '/@/assets/tab-nav.svg';
import { useRouter, useRoute } from 'vue-router';
import { getById, addObj, editObj } from '/@/api/mall/pagedesign';
interface formState {
	id: string | undefined;
	pageName: string;
	pageContent: {
		componentsList: Array<ComponentsListStates>;
	};
	status: string;
	homeStatus: string;
}
export default defineComponent({
	components: {
		draggable,
		titleText: defineAsyncComponent(() => import('./components/titleText.vue')),
		image: defineAsyncComponent(() => import('./components/image.vue')),
		notice: defineAsyncComponent(() => import('./components/notice.vue')),
		goods: defineAsyncComponent(() => import('./components/goods.vue')),
		tabNav: defineAsyncComponent(() => import('./components/tabNav.vue')),
		magicSquare: defineAsyncComponent(() => import('./components/magicSquare.vue')),
		titleTextSetting: defineAsyncComponent(() => import('./components/setting/titleTextSetting.vue')),
		imageSetting: defineAsyncComponent(() => import('./components/setting/imageSetting.vue')),
		noticeSetting: defineAsyncComponent(() => import('./components/setting/noticeSetting.vue')),
		goodsSetting: defineAsyncComponent(() => import('./components/setting/goodsSetting.vue')),
		tabNavSetting: defineAsyncComponent(() => import('./components/setting/tabNavSetting.vue')),
		magicSquareSetting: defineAsyncComponent(() => import('./components/setting/magicSquareSetting.vue')),
	},
	setup() {
		const form = ref<formState>({
			id: undefined,
			pageName: '微页面',
			pageContent: {
				componentsList: [],
			},
			status: '1',
			homeStatus: '0',
		});
		const loading = ref(false);
		const $route = useRouter();
		const $useRoute = useRoute();
		const storesDiypage = diypage();
		const { diyPageData } = storeToRefs(storesDiypage);
		const canUseComponents = ref({
			//基础组件
			base: [
				{
					name: '标题文本',
					icon: titleSvg,
					type: 'titleText',
				},
				{ name: '公告', icon: noticeSvg, type: 'notice' },
				{ name: '商品', icon: goodsSvg, type: 'goods' },
				{ name: '图片广告', icon: imageSvg, type: 'image' },
				{ name: '图文导航', icon: tabNavSvg, type: 'tabNav' },
				{ name: '魔方', icon: menuSvg, type: 'magicSquare' },
			],
			//营销组件
			marketing: [
				{ name: '优惠券', icon: goodsSvg, type: 'coupon' },
				{ name: '多人拼团', icon: goodsSvg, type: 'groupon' },
				{ name: '秒杀', icon: goodsSvg, type: 'seckill' },
				{ name: '积分夺宝', icon: goodsSvg, type: 'loot' },
			],
		});
		// 预览组件右侧操作按钮
		const showPreviewBtn = ref(false);
		// 左侧组件展开变量
		const activeNames = ref(['1', '2']);
		// 显示右侧配置组件
		const showSetting = ref(false);
		//
		const dragOptions = ref({
			nimation: 200,
			group: 'description',
			disabled: false,
			ghostClass: 'ghost',
		});
		// 获取设计页面组件内容
		const list = computed(() => {
			return diyPageData.value;
		});
		// 预览组件移动开始事件
		const startComponent = () => {
			// 移除选中
			showPreviewBtn.value = false;
			diyPageData.value.selectedIndex = undefined;
			showSetting.value = false;
		};
		// 获取选中预览组件索引
		const selectedIndex = computed(() => {
			return diyPageData.value.selectedIndex;
		});
		// 右侧配置组件名称 预览组件+固定值Setting
		const settingName = ref('');
		//右侧配置组件数据
		const settingData: any | undefined = ref({});
		// 添加组件
		const addComponent = (item: any) => {
			list.value.componentsList.push({
				name: item.type,
				id: Math.random(),
				data: {},
			});
			if (!showSetting.value || diyPageData.value.selectedIndex != list.value.componentsList.length - 1) {
				showSetting.value = false;
				nextTick(() => {
					showSetting.value = true;
				});
			}
			settingName.value = item.type + 'Setting';
			diyPageData.value.selectedIndex = list.value.componentsList.length - 1;
			settingData.value = diyPageData.value.componentsList[diyPageData.value.selectedIndex].data;
			showPreviewBtn.value = true;
		};
		// 预览组件点击事件
		const onComponent = (row: any, index: number) => {
			if (!showSetting.value || index != diyPageData.value.selectedIndex) {
				showSetting.value = false;
				nextTick(() => {
					showSetting.value = true;
				});
			}
			showPreviewBtn.value = true;
			diyPageData.value.selectedIndex = index;
			settingName.value = row.name + 'Setting';
			settingData.value = row.data;
		};
		// 预览组件删除事件
		const delComponent = () => {
			ElMessageBox.confirm('此操作将删除该组件，是否继续?', '提示', {
				confirmButtonText: '确认',
				cancelButtonText: '取消',
				type: 'warning',
			}).then(() => {
				if (selectedIndex.value != undefined && selectedIndex.value >= 0) {
					list.value.componentsList.splice(selectedIndex.value, 1);
				}
				showPreviewBtn.value = false;
				diyPageData.value.selectedIndex = undefined;
				showSetting.value = false;
			});
		};

		// 返回事件
		const onBack = () => {
			$route.push('/mall/theme/pagedesign');
		};
		// 页面初始化事件
		const initForm = () => {
			const { id } = $useRoute.query;
			showSetting.value = false;
			if (id) {
				//编辑
				getDetail(id);
			} else {
				list.value.componentsList = [];
			}
		};
		// 查询详情
		const getDetail = (id: any) => {
			getById(id).then((response) => {
				form.value = response.data.data;
				list.value.componentsList = form.value.pageContent.componentsList;
			});
		};
		// 提交保存事件
		const onSubmit = () => {
			form.value.pageContent.componentsList = diyPageData.value.componentsList;
			if (diyPageData.value.componentsList.length <= 0) {
				ElMessage.error('内容不能为空');
				return false;
			}

			if (form.value.id) {
				// 编辑
				onEdit();
			} else {
				// 新增
				onAdd();
			}
		};
		// 新增
		const onAdd = () => {
			loading.value = true;
			addObj(form.value).then((response) => {
				ElMessage.success('新增成功');
				loading.value = false;
			}).then(() => {
				loading.value = false;
			});
		};
		// 修改
		const onEdit = () => {
			loading.value = true;
			editObj(form.value).then((response) => {
				ElMessage.success('修改成功');
				loading.value = false;
			}).then(() => {
				loading.value = false;
			});
		};
		initForm();
		return {
			form,
			list,
			loading,
			iphone14Svg,
			showSetting,
			settingData,
			settingName,
			dragOptions,
			activeNames,
			diyPageData,
			selectedIndex,
			showPreviewBtn,
			canUseComponents,
			onBack,
			onSubmit,
			addComponent,
			onComponent,
			delComponent,
			startComponent
		};
	},
});
</script>
<style lang="scss">
.el-collapse {
	border: none !important;
}

.el-collapse-item__header {
	border: none !important;
}

.page-design {
	display: flex;
	height: 100%;
}

.page-left {
	width: 200px;
	border: 1px solid #e5e5e5;
	height: 100%;
	overflow: auto;
	padding: 4px;

	.canUse-list {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;

		.item {
			width: 80px;
			height: 60px;
			// padding: 10px;
			text-align: center;
			cursor: pointer;

			.icon {
				width: 24px;
			}
		}
	}
}

.page-right {
	width: 480px;
	border: 1px solid #e5e5e5;
	height: 100%;
	overflow-y: auto;
}

.preview-wrap {
	display: flex;
	justify-content: center;
	flex: 1;
	overflow: auto;

	.preview {
		position: relative;
		width: 400px;
		height: 730px;

		.preview-title {
			background-color: #F9002C;
			position: relative;
			left: 30px;
			top: 10px;
			width: 346px;
			height: 88px;
			border-radius: 50px 50px 0px 0px;

			.title-bor {
				color: rgb(255, 255, 255);
				width: 100%;
				height: 100%;
				padding-top: 0px;
				font-size: 16px;
				display: flex;
				align-items: center;
			}

			.title-text {
				position: absolute;
				width: 100%;
				text-align: center;
				padding-top: 22px;
			}
		}

		.iphone {
			position: absolute;
			top: 0;
			width: 400px;
			height: 730px;
			z-index: 2;
			pointer-events: none;
		}

		.content {
			position: absolute;
			// top: 88px;
			left: 39px;
			width: 329px;
			height: 610px;
			border-radius: 10px;
			overflow-y: scroll;


			.com-item {
				position: relative;
				min-height: 20px;

				.preview-btn {
					position: absolute;
					top: 0px;
					right: 0px;
					padding: 10px 5px;
					width: 30px;
					background: #fff;
					text-align: center;
					z-index: 1;
					border-radius: 10px;
					box-shadow: 0 0 14px 0 rgb(0 0 0 / 10%);

					.item {
						padding-top: 5px;
						padding-bottom: 5px;

						&:hover {
							color: #155bd4;
						}
					}

					&:hover {
						cursor: pointer;
						background: #eee;
					}
				}
			}

			.footer {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 14px;
			}

			&:hover {
				cursor: move;
			}

			.active {
				border: 1px solid #155bd4;
				cursor: move;
			}
		}
	}
}

.footer-btn {
	width: 100%;

	.el-button {
		width: 100px;
	}

	.button {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
}
</style>
